<template>
  <div>
    <el-card>
      <!-- 面包屑 -->
      <!-- <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-show="showRentParise"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb> -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-show="showRentParise"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <el-form>
          <span class="keyword">标签名称</span>
          <el-input class="key" size="small" v-model="List.tagName"></el-input>
          <span class="sta">状态</span>
          <span class="sel">
            <el-select
              v-model="List.state"
              slot="prepend"
              placeholder="请选择"
              size="small"
            >
              <el-option label="已启用" value="1"></el-option>
              <el-option label="已禁用" value="0"></el-option>
            </el-select>
          </span>
          <el-button plain size="small" @click="clear">清除</el-button>
          <el-button type="primary" size="small" @click="getArticleList"
            >搜索</el-button
          >
          <el-link
            type="primary"
            class="el-icon-back back"
            :underline="false"
            @click="back"
            v-show="showRentParise"
            >返回学科</el-link
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            class="new"
            @click="addDialogVisible"
            >新增学科</el-button
          >
        </el-form>
      </el-row>
      <!-- /头部关键字结束 -->

      <!-- 消息提示 -->
      <el-alert type="info" show-icon class="msg">
        <template slot="title"> 数据一共{{ total }}条 </template>
      </el-alert>
      <!-- /消息提示结束 -->

      <!-- 列表区域 -->
      <div class="list">
        <template>
          <el-table :data="articleList">
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="subjectName" label="所属学科">
            </el-table-column>
            <el-table-column prop="tagName" label="目录名称"></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column prop="addDate" label="创建时间" width="200">
              <template v-slot="scope">
                {{ scope.row.addDate | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template v-slot="scope">
                {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="200">
              <template v-slot="{ row, $index }">
                <el-link type="primary" @click="startUser(row, $index)">
                  {{ row.state === 1 ? '禁用' : '启用' }}
                </el-link>
                <el-link
                  type="primary"
                  @click="changeEdit(row)"
                  :disabled="row.state ? true : false"
                  >修改
                </el-link>
                <el-link
                  type="primary"
                  @click="deleteArticleById(row.id)"
                  :disabled="row.state ? true : false"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- /列表区域 -->

      <!-- 页码 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="List.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="List.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- /页码 -->

      <!-- 新增技巧的弹框 -->
      <el-dialog
        title="新增文章"
        :visible.sync="closeDialogVisible"
        width="25%"
        @close="addDialogClose"
      >
        <!-- 表单 -->
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="80px"
        >
          <el-form-item
            label="所属学科"
            prop="subjectID"
            v-show="!showRentParise"
          >
            <template>
              <el-select v-model="addForm.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in pull"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="addForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <!-- /表单 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSub">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /新增技巧的弹框 -->

      <!-- 修改技巧弹框 -->
      <el-dialog
        title="修改文章"
        :visible.sync="editCloseDialogVisible"
        width="25%"
        @close="editDialogClose"
      >
        <!-- 表单 -->
        <el-form
          :model="changeForm"
          :rules="changeFormRules"
          ref="changeFormRef"
          label-width="80px"
        >
          <el-form-item label="所属学科" prop="subjectID">
            <template>
              <el-select v-model="changeForm.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in pull"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="changeForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <!-- /表单 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editCloseDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSubject">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /修改技巧弹框 -->
    </el-card>
  </div>
</template>

<script>
import {
  getArticles,
  deleteArticle,
  addArticle,
  startUserings,
  pullDown,
  editSub
} from '../../api/subject/tags'
export default {
  name: 'tags',
  data() {
    return {
      List: {
        page: 1,
        pagesize: 5,
        subjectID: this.$route.query.id,
        tagName: ''
      },
      articleList: [],
      // 页码总数
      total: 0,
      // 新增技巧按钮点击事件
      closeDialogVisible: false,
      // 修改技巧按钮点击事件
      editCloseDialogVisible: false,
      // 数据显示隐藏
      showRentParise: false,
      addForm: {
        subjectID:
          this.$route.query.id && typeof this.$route.query.id === 'string'
            ? parseInt(this.$route.query.id)
            : this.$route.query.id,
        tagName: ''
      },
      addFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      changeFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      pull: [],
      changeForm: {
        id: '',
        subjectID: '',
        tagName: ''
      }
    }
  },
  async created() {
    if (this.$route.query.id) {
      const { data } = await getArticles(this.List)
      console.log(data)
      this.articleList = data.items
      this.total = data.counts
      this.showRentParise = true
    } else {
      this.getArticleList()
    }
  },
  methods: {
    // 获取数据
    async getArticleList() {
      const { data: res } = await getArticles(this.List)
      this.articleList = res.items
      this.total = res.counts
    },
    // 监听 pagesize 改变
    handleSizeChange(newSize) {
      this.List.pagesize = newSize
      this.getArticleList()
    },
    // 监听 pagenum 改变
    handleCurrentChange(newPage) {
      this.List.page = newPage
      this.getArticleList()
    },
    // 清除按钮
    clear() {
      this.List.tagName = ''
      this.List.state = null
      this.getArticleList()
    },
    // 根据id删除技巧
    async deleteArticleById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      try {
        await deleteArticle(id)
        this.getArticleList()
      } catch (err) {
        this.$message('删除失败')
      }
    },
    // 文章状态的监听
    async startUser(val, index) {
      if (val.state === 1) {
        // console.log(this.articleList)
        this.articleList[index].state = 0
      } else {
        this.articleList[index].state = 1
      }
      try {
        await startUserings(val, index)
        this.flag = !this.flag
        this.$message('操作成功')
      } catch (err) {
        this.$message('失败')
      }
    },
    // 下拉菜单
    async addDialogVisible() {
      const data = await pullDown()
      this.pull = data.data
      this.closeDialogVisible = true
    },
    // 点击确定按钮添加学科
    addSub() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        try {
          await addArticle(this.addForm)
          this.getArticleList()
          this.closeDialogVisible = false
          this.$message('添加成功')
        } catch (err) {
          this.$message('新增失败')
        }
      })
    },
    // 监听添加用户对话框的关闭事件
    addDialogClose() {
      this.$refs.addFormRef.resetFields()
    },
    // 监听修改文章的关闭事件
    editDialogClose() {
      this.$refs.changeFormRef.resetFields()
    },
    // 渲染修改文章详情列表
    async changeEdit(data) {
      const { data: res } = await pullDown()
      this.pull = res
      this.editCloseDialogVisible = true
      this.changeForm.id = data.id
      this.changeForm.subjectName = data.subjectName
      this.changeForm.tagName = data.tagName
    },
    // 发起修改文章列表
    async editSubject() {
      try {
        const { data } = await editSub(this.changeForm)
        this.changeForm.subjectID = data.subjectID
        this.changeForm.tagName = data.tagName
        this.getArticleList()
        this.editCloseDialogVisible = false
        this.$message('修改成功')
      } catch (err) {
        this.$message('修改失败')
      }
    },
    back() {
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
  font-size: 12px;
}

.keyword {
  font-size: 14px;
  margin: 0 15px;
  font-weight: 700;
  color: #606266;
}
.key {
  width: 150px;
}
.sta {
  margin-left: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}
.sel {
  margin: 0 15px;
}
.new {
  position: absolute;
  right: 0;
}
.back {
  position: absolute;
  right: 110px;
  top: 10px;
}
.msg {
  margin-top: 20px;
}
.list {
  margin-top: 20px;
}
.el-link {
  margin-right: 10px;
}
/deep/.el-table_1_column_7 {
  .el-link--inner {
    padding: 0 5px;
  }
}
/deep/.el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background-color: #409eff;
    border-radius: 10px 10px 0 0;
    height: 20px;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    .el-form {
      span {
        color: #606266;
        font-weight: 700;
        padding-left: 13px;
      }
      .el-select {
        .el-input--suffix {
          padding-left: 10px;
          width: 98%;
        }
      }
      .el-form-item {
        margin-top: 10px;
        .el-form-item__label {
          color: #606266;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
